<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		姓名：<input type="text" v-model="username" />  <br /><br />
		年龄：<input type="text" v-model="age" />  <br /><br />
		电话：<input type="text" v-model="tel" />  <br /><br />
		<button @click="add">创建</button>
		<table>
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>电话</th>
			<th>操作</th>
		</tr>
		<tr v-for="(val,key,index) in personArr" >
			<td ></td>
			<td >{{val.username}}</td>
			<td >{{val.age}}</td>
			<td >{{val.tel}}</td>
			<td>
				<button @click="del($index)">删除</button>
			</td>
		</tr>
	</table>
	</div>
	
</body>
<script type="text/javascript">
	var vm =new Vue({
		el:"#app",
		data:{
			username:"",
			tel:"",
			age:"",
			personArr:[
				{
					username:"李四",
					tel:"2323",
					age:"22"
				}
			]
		},
		methods:{
			add:function(){
				var obj = {};
				obj.username = this.username;
				obj.age = this.age;
				obj.tel = this.tel;
				this.personArr.push(obj)
				this.username = "";
				this.age = "";
				this.tel = "";
			},
			del:function(index){
				alert(index)
			}
		}
	})
</script>
</html>